<template>
  <div id="app">
    <div class="left">
      <div v-for="(item,index) in lists" :key="index" :class="indexs == index?'liang':''" @click="gaoliang(index)">{{item.tabname}}</div>
    </div>
    <div class="right" >
      <p>热销</p>
      <div class="list" v-for="(item,index) in lists[indexs].list" :key="index">
        <div class="imgbox">
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F04%2F20210504062111_d8dc3.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668340729&t=484dc3efda63f18eab1bf3a5555e41fd" alt="">
        </div>
        <div class="text">
          <h3>{{item.name}}</h3>
          
          <!-- <span>{{item.miaoshu}}</span><br> -->
          <span>月销:{{item.yuxiao}}</span>
          <span>好评:{{item.haoping}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import left from "./components/left.vue";
import right from "./components/right.vue";
export default {
  data(){
    return {
      lists:[
    {tabname:"热销",
    list:[
      {pic:"",name:"热销商品1",yuxiao:456,haoping:444},
      {pic:"",name:"热销商品2",yuxiao:456,haoping:444},
      {pic:"",name:"热销商品3",yuxiao:456,haoping:444},
    ]},
    {tabname:"优惠",
    list:[
      {pic:"",name:"优惠商品1",yuxiao:456,haoping:444},
      {pic:"",name:"优惠商品2",yuxiao:456,haoping:444},
      {pic:"",name:"优惠商品3",yuxiao:456,haoping:444},
    ]},
    {tabname:"三文鱼",
    list:[
      {pic:"",name:"三文鱼商品1",yuxiao:456,haoping:444},
      {pic:"",name:"三文鱼商品2",yuxiao:456,haoping:444},
      {pic:"",name:"三文鱼商品3",yuxiao:456,haoping:444},
    ]},
    {tabname:"刺身",
    list:[
      {pic:"",name:"刺身商品1",yuxiao:456,haoping:444},
      {pic:"",name:"刺身商品2",yuxiao:456,haoping:444},
      {pic:"",name:"刺身商品3",yuxiao:456,haoping:444},
    ]},
    {tabname:"礼品专区",
    list:[
      {pic:"",name:"礼品专区商品1",yuxiao:456,haoping:444},
      {pic:"",name:"礼品专区商品2",yuxiao:456,haoping:444},
      {pic:"",name:"礼品专区商品3",yuxiao:456,haoping:444},
    ]},
    {tabname:"大虾",
    list:[
      {pic:"",name:"大虾专区商品1",yuxiao:456,haoping:444},
      {pic:"",name:"大虾专区商品2",yuxiao:456,haoping:444},
      {pic:"",name:"大虾专区商品3",yuxiao:456,haoping:444},
    ]},
      ],
      indexs:0,
    }
  },
  methods:{
    gaoliang(index){
      this.indexs = index;
    }
  },
}
</script>

<style >
  *{
    margin: 0;
    padding: 0;
  }
  #app{
    display: flex;
    padding: 8px;
  }
  .left{
    margin-right:10px ;
    width: 80px;
  }
  .left>div{
    width: 60px;
    margin-bottom:20px ;
    padding-left: 5px;
  }
  .left>div:nth-child(1){
    font-weight:bold ;
    margin-top: 5px;
  }
  .liang{
    border-left: 1px solid red;
  }


  
  .imgbox{
    width: 130px;
    margin-top: 5px;
  }
   .imgbox>img{
    width: 100%;

   }
   .list{
    display: flex;
    margin: 10px 0;
   }
</style>
